<!doctype html>
<html>
  <title>Dungeon Maze Generator</title>
  <script src="maze.js?"></script>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Play');
    body { font-family: 'Play', sans-serif; width: 800px; line-height: 120%; margin-left: auto; margin-right: auto; margin-top: 20px; color: #444; font-size: 14px}
    input.slider { position:relative; top: 2px; width: 72px }
    #display { font-family: 'Lucida Console', monospace; line-height:85%; letter-spacing: -0.75px; transform-origin: 0 0; color: #000; font-size: 14px }
    button  { font-family: 'Play', sans-serif; font-size: 0.9em; height: 26px }
  </style>
  
  <center>
    <b style="font-size: 120%; color:#DDAF08">Dungeon Maze Generator by <a style="color:#DDAF08" href="https://casual-effects.com">Casual Effects</a></b>
    <br>[<a href="maze.js">source code</a>]
  </center>
  <p>
    The maze is always solvable. Every spot is reachable in the maze. With Shortcuts at minimum, there is a unique path. With Fill at maximum,
    that path touches every cell.
  </p>
  <button onclick="regenerate()">Regen</button>
  <input style="margin-left:13px" type="checkbox" id="wrap" autocomplete="off" onchange="regenerate()"><label for="wrap">Tile</label>
  <span style="padding-left:16px">Shortcuts</span> <input class="slider" type="range" min="0" max="100" value="0" autocomplete="off" onchange="regenerate()" id="imperfection">
  <span style="padding-left:16px">Hall</span> <input class="slider" type="range" min="1" max="5" value="3" autocomplete="off" onchange="regenerate()" id="hallWidth">
  <span style="padding-left:16px">Wall</span> <input class="slider" type="range" min="1" max="8" value="1" autocomplete="off" onchange="regenerate()" id="wallWidth">
  <span style="padding-left:16px">Fill</span> <input class="slider" type="range" min="0" max="100" value="100" autocomplete="off" onchange="regenerate()" id="fill">
  <span style="padding-left:16px">Rooms</span> <input class="slider" type="range" min="0" max="100" value="0" autocomplete="off" onchange="regenerate()" id="rooms">

  <div style="display: inline-block">
    <pre id="display"></pre>
  </div>
  
  <script>
      function regenerate() {
         let wrap = document.getElementById("wrap").checked !== false;
         let imperfection = parseInt(document.getElementById("imperfection").value) / 100;
         let fill = parseInt(document.getElementById("fill").value) / 100;

         let hallWidth = parseInt(document.getElementById("hallWidth").value);
         let wallWidth = parseInt(document.getElementById("wallWidth").value);
         let rooms = parseInt(document.getElementById("rooms").value) / 100;

         let deadEndArray = [];
         let maze = makeMaze(104, 60, wrap, imperfection, fill, deadEndArray);
         let map = mazeToMap(maze, hallWidth, wallWidth);

         if (rooms > 0) {
            addMapRooms(map, deadEndArray, rooms, hallWidth, wallWidth);
         }
      
         let display = document.getElementById("display");
         let scale = 2 / (hallWidth + wallWidth);
         display.style.transform = "scale(" + scale + "," + (scale * 0.7) + ")";
         display.style.textShadow = "" + (1.5 / scale) + "px " + (2 / scale) + "px " + (5 / scale) + "px rgba(0,0,0,0.35)";

         let hsl = "" + (Math.random() * 360) + ",40%,70%";
         display.style.background = "linear-gradient(to bottom, hsla(" + hsl + ",0.1) 0%, hsla(" + hsl + ",1) 100%)";
         display.innerHTML = mapToString(map);
      }
      regenerate();
  </script>

</html>
